import React, {Component} from 'react';
import axios from "axios";
class Search extends Component {
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索用户</h3>
        <div>
          <input type="text" ref={(currentNode) => {
            this.input = currentNode
          }} placeholder="输入关键词点击搜索"/>&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    );
  }

  search = () => {
    //  获取用户的输入
    const { input:{ value } } = this;
    // 发送请求钱,通知APP更新状态
    this.props.UpdateAppState({
      isFirst: false,
      isLoading: true,
    })
    axios.get("/github/search/users",{
      params:{
        q: value
      }
    }).then(res => {
      const { items } = res.data;
      this.props.UpdateAppState({
        isFirst: false,
        isLoading: false,
        userList: items
      })
    },(err) => {
      this.props.UpdateAppState({
        isLoading: false,
        err: err.message
      })
    })
  }
}

export default Search;